<template>
  <div>
    <!-- 编辑样式按钮 -->
    <el-button link type="primary" :icon="Edit" @click="openDialog">编辑样式</el-button>

    <!-- 样式编辑弹窗 -->
    <el-dialog title="全局样式配置" v-model="dialogVisible" width="70%" @close="resetStyle">
      <CodeEditor v-model="styleData" lang="css" class="css-edit" :placeholder="placeholderText" />
      <!-- 弹窗底部操作 -->
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEvent">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import CodeEditor from '@/components/designer/config-group/CodeEditor.vue';

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
});

const placeholderText = ref('请输入全局CSS样式代码')

const dialogVisible = ref(false);
const styleData = ref('');

// 打开弹窗时加载已有样式内容
const openDialog = () => {
  styleData.value = props.modelValue;
  dialogVisible.value = true;
};

// 保存编辑后的样式内容
const saveEvent = () => {
  emit('update:modelValue', styleData.value)
  dialogVisible.value = false;
};

// 重置内容（关闭时不保存）
const resetStyle = () => {
  styleData.value = props.modelValue;
};
</script>

<style scoped>
.css-edit {
  height: 50vh;
}
</style>